<template>
  <div class="my-2 center">
    <h1><el-icon class="px-2 gray"><CaretRight /></el-icon>频道广场<el-icon class="px-2 gray"><CaretLeft /></el-icon></h1>
  </div>
  <el-row :gutter="12" class="pointer">
    <el-col :span="4" v-for="(item,index) in channelImgs" :key="index">
      <img :src="item.name" @click="toList(item.cid)" class="w-100">
    </el-col>
  </el-row>
  <div class="my-2 center">
    <h1><el-icon class="px-2 gray"><CaretRight /></el-icon >猜你喜欢<el-icon class="px-2 gray"><CaretLeft /></el-icon></h1>
  </div>
  <el-row gutter="20">
    <el-col :span="6" v-for="(item,index) in recommendGoods" :key="index" class="mb-1">
      <div class="box" @click="toDetails(item.cid)">
        <img :src="item.imgPath" class="w-100">
        <p>{{ item.desc }}</p>
        <p class="price">&yen;<span>{{ item.price }}</span>.00</p>
      </div>
    </el-col>
  </el-row>
</template>

<script  setup>
  import { CaretRight,CaretLeft } from '@element-plus/icons-vue'
  import { defineProps } from "vue"   
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const props = defineProps({               //使用defineProps替代props
    channelImgs:{
      type:[]
    },
    recommendGoods:{
      type:[]
    }
  })
  let toList = (cid)=>{
    router.push({path:"/list",query:{cid:cid}})
  }
  let toDetails = (cid)=>{
    router.push({path:"/details",query:{cid:cid}})
  }
</script>

<style scoped>
.box{
  padding:8px 16px;
  border-radius: 2px;
  cursor: pointer;
  border:1px solid #ddd;
}
.box>img{
  border-radius: 3px;
}
.box>p{
  margin:2% 0;
}
p.price{
  color:red;
  font-size:0.8rem;
  font-weight: bold;
}
p.price>span{
  font-size:1.3rem;
  padding-left:5px; 
}
</style>